import classNames from 'classnames';
import styles from './index.module.scss';

/*
  学习目标：封装Input组件 -  
    支持原生的属性
    支持额外内容在右侧（可选）
  支持校验、
  步骤：
    1. 定义props，并且继承input的原生props类型
    2. 透传props
    3. 定义extra表示额外内容
*/

interface IInputProp
  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
  extra?: React.ReactNode;
  // 5. 定义errMsg
  errMsg?: string;
}
export default function Input(props: IInputProp) {
  const { extra, errMsg, className, style, ...restProps } = props;
  return (
    // 6. 开放className 和style属性
    <div className={classNames(styles.root, className)} style={style}>
      <div className="input-box">
        <input className="input " {...restProps} />
        <div className="validate">{errMsg}</div>

        {/* 4. extra逻辑判断 显示额外内容 */}
        {extra && <div className="extra">{extra}</div>}
      </div>
    </div>
  );
}
